<template>
	<view class="container">
		<customNav>
			<view style="display: flex; align-items: center;" @click="handleToHome">
				<uni-icons type="left" size="28"></uni-icons>
				<text class="size18" style="margin-left: 16rpx;">集控器</text>
			</view>
		</customNav>
		<view class="content">
			<view style="display: flex;align-items: center;justify-content: center;margin-top: 10px;">
				<img :src="jikongqiUrl" style="width:198px;height: 198px;" alt="" />
			</view>
			<view class="margin-t10"
				style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
				<view style="width: 33.3%;display: flex;align-items: center;justify-content: center;flex-flow: column;">
					<view class="size20 bold">{{ts1}}℃</view>
					<view class="size14 margin-t8">供水温度</view>
				</view>
				<view style="width: 33.3%;display: flex;align-items: center;justify-content: center;flex-flow: column;">
					<view class="size20 bold">{{ts2}}℃</view>
					<view class="size14 margin-t8">回水温度</view>
				</view>
				<!-- <view style="width: 33.3%;display: flex;align-items: center;justify-content: center;flex-flow: column;">
					<view class="size20 bold">{{ts3}}℃</view>
					<view class="size14 margin-t8">混水温度</view>
				</view> -->
				<view style="width: 33.3%;display: flex;align-items: center;justify-content: center;flex-flow: column;">
					<view class="size20 bold">{{pressure}}Bar</view>
					<view class="size14 margin-t8">供水压力</view>
				</view>
				<view style="width: 33.3%;display: flex;align-items: center;justify-content: center;flex-flow: column;">
					<view class="size20 bold">{{pressure2}}Bar</view>
					<view class="size14 margin-t8">回水压力</view>
				</view>
			</view>
			<view style="padding:0 20px 20px 20px;width: 100%;box-sizing: border-box;margin-top: 20px;">
				<view class="white-bg">
					<view class="size14">比例阀</view>
					<view style="width: calc(100% - 150px)">
						<u-line-progress :percentage="data.measure" activeColor="#409eff" :showText="false"
							height="5"></u-line-progress>
					</view>
					<view class="size14">{{measure}}%</view>
				</view>
				<view class="white-bg">
					<view class="size14">集控器</view>
					<img src="@/static/images/开启.png" style="width:41px;height: 18px;" alt="" />
					<!-- <u-switch v-model="JKQSwitch" @change="changeJKQ"></u-switch> -->
				</view>
				<view class="white-bg">
					<view class="size14">水泵</view>
					<img v-if="HWP" src="@/static/images/开启.png" style="width:41px;height: 18px;" alt="" />
					<img v-else src="@/static/images/关闭.png" style="width:41px;height: 18px;" alt="" />
					<!-- <u-switch v-model="HWP" @change="changeSB"></u-switch> -->
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;">
					<view v-for="(item,index) in list" :key="index" class="white-bg2" style="width: 48%;">
						<view class="flex-row">
							<view class="size14" style="margin-right: 15px;">{{item.name}}</view>
							<u-switch v-model="item.isOpen" disabled="true" @change="changeTD(item,index)"></u-switch>
						</view>
						<view class="flex-row margin-t15">
							<view class="size14" style="margin-right: 15px;">状态：</view>
							<img v-if="item.status == 0" src="@/static/images/开启.png" style="width:41px;height: 18px;" alt="" />
							<img v-if="item.status == 1" src="@/static/images/关闭.png" style="width:41px;height: 18px;" alt="" />
							<img v-if="item.status == 9999" src="@/static/images/未启用.png" style="width:41px;height: 18px;"
								alt="" />
							<img v-if="item.status == 99" src="@/static/images/异常.png" style="width:41px;height: 18px;"
								alt="" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0 0 20px 0;">
			<view class="chart-section" v-if="salesData.categories.length > 0">
			  <text class="section-title">供水温度（℃）</text>
			  <!-- 第一个图表：供水温度 -->
			  <line-chart 
				canvasId="salesChart"
				:data="salesData"
				:options="salesOptions"
				:height="250"
			  />
			</view>
		
			<view class="chart-section" v-if="userData.categories.length > 0">
			  <text class="section-title">回水温度（℃）</text>
			  <!-- 第二个图表：回水温度 -->
			  <line-chart 
				canvasId="userChart"
				:data="userData"
				:options="userOptions"
				:height="250"
			  />
			</view>
		
			<view class="chart-section" v-if="trafficData.categories.length > 0">
			  <text class="section-title">供水压力（Bar）</text>
			  <!-- 第三个图表：供水压力 -->
			  <line-chart 
				canvasId="trafficChart"
				:data="trafficData"
				:options="trafficOptions"
				:height="250"
			  />
			</view>
		
			<view class="chart-section" v-if="conversionData.categories.length > 0">
			  <text class="section-title">回水压力（Bar）</text>
			  <!-- 第四个图表：回水压力 -->
			  <line-chart 
				canvasId="conversionChart"
				:data="conversionData"
				:options="conversionOptions"
				:height="250"
			  />
			</view>
		</view>
	</view>
</template>
<script>
	import env from "@/config/env.js";
	import customNav from "@/components/nav/index.vue"
	import lineChart from "./lineChart/index.vue"
	import {
		modifyDevice,
		deviceToHome,
		historyData
	} from "@/api/device/index.js";
	export default {
		components: {
			customNav,
			lineChart
		},
		data() {
			return {
				jikongqiUrl:env.baseUrl + "/file/get_file?file_name=集控器.png",
				inPage:false,
				JKQSwitch: true,
				HWP: false, //泵开关，0代表关闭 false，1代表开启 true，99（未启用）此路不存在 9999此路(异常)
				measure: "0", //例调节阀控制参数，（4-20mA对应的数字量是6400-32000？待确认 
				ts1: "0", //供水温度，9999此路异常
				ts2: "0", //回水温度 ，9999此路异常
				ts3: "0", //混水温度 ，9999此路异常
				pressure:"0",  //供水压力
				pressure2:"0", //回水压力
				list: [{
						id: 0,
						name: "通道一",
						status: 0,
						isOpen: false,
					},
					{
						id: 1,
						name: "通道二",
						status: 0,
						isOpen: false
					},
					{
						id: 2,
						name: "通道三",
						status: 0,
						isOpen: false
					},
					{
						id: 3,
						name: "通道四",
						status: 0,
						isOpen: false
					},
					{
						id: 4,
						name: "通道五",
						status: 0,
						isOpen: false
					},
					{
						id: 5,
						name: "通道六",
						status: 0,
						isOpen: false
					},
					{
						id: 6,
						name: "通道七",
						status: 0,
						isOpen: false
					},
					{
						id: 7,
						name: "通道八",
						status: 0,
						isOpen: false
					},
				],
				
				// 1. 供水温度数据与配置
				salesData: {
					categories: [],
					series: [{
					  name: "供水温度",
					  data: [],
					  format:"tooltipDemo3"
					}]
				},
				salesOptions: {
					color: ["#1890FF"],
					enableScroll: true, // 启用滚动（应对极端情况）
					xAxis: {
					    disableGrid: true,
					    scrollShow: true,
						itemCount: 2, // 每次显示2个标签
						rotate: 0, // 关闭旋转（折行必须关闭）
						labelWidth: 100, // 标签宽度（足够容纳两行）
						lineHeight: 40, // 行高（至少为字体大小的2倍）
						fontSize: 12, // 减小字体避免溢出
						// 格式化器：确保返回含\n的字符串
						formatter: function(value) {
						  return value; // 直接返回带\n的格式化后的值
						}
					},
					yAxis: { data: [{tofix: 2 }] },
					dataLabel: false, // 关闭数据标签
					
				},
			
				// 2. 回水温度数据与配置
				userData: {
					categories: [],
					series: [{
					  name: "回水温度",
					  data: [],
					  format:"tooltipDemo3"
					}]
				},
				userOptions: {
					color: ["#00B42A"],
					enableScroll: true, // 启用滚动（应对极端情况）
					xAxis: {
					    disableGrid: true,
					    scrollShow: true,
						itemCount: 2, // 每次显示2个标签
						rotate: 0, // 关闭旋转（折行必须关闭）
						labelWidth: 100, // 标签宽度（足够容纳两行）
						lineHeight: 40, // 行高（至少为字体大小的2倍）
						fontSize: 12, // 减小字体避免溢出
						// 格式化器：确保返回含\n的字符串
						formatter: function(value) {
						  return value; // 直接返回带\n的格式化后的值
						}
					},
					yAxis: { data: [{tofix: 2 }] },
					dataLabel: false, // 关闭数据标签
				},
			
				// 3. 供水压力数据与配置
				trafficData: {
					categories: [],
					series: [{
					  name: "供水压力",
					  data: [],
					  format:"tooltipDemo4"
					}]
				},
				trafficOptions: {
					color: ["#FF7D00"],
					enableScroll: true, // 启用滚动（应对极端情况）
					xAxis: {
					    disableGrid: true,
					    scrollShow: true,
						itemCount: 2, // 每次显示2个标签
						rotate: 0, // 关闭旋转（折行必须关闭）
						labelWidth: 100, // 标签宽度（足够容纳两行）
						lineHeight: 40, // 行高（至少为字体大小的2倍）
						fontSize: 12, // 减小字体避免溢出
						// 格式化器：确保返回含\n的字符串
						formatter: function(value) {
						  return value; // 直接返回带\n的格式化后的值
						}
					},
					yAxis: { data: [{tofix: 2 }] },
					dataLabel: false, // 关闭数据标签
				},
			
				// 4. 回水压力数据与配置
				conversionData: {
					categories: [],
					series: [{
					  name: "回水压力",
					  data: [],
					  format:"tooltipDemo4"
					}]
				},
				conversionOptions: {
					color: ["#F53F3F"],
					enableScroll: true, // 启用滚动（应对极端情况）
					xAxis: {
					    disableGrid: true,
					    scrollShow: true,
						itemCount: 2, // 每次显示2个标签
						rotate: 0, // 关闭旋转（折行必须关闭）
						labelWidth: 100, // 标签宽度（足够容纳两行）
						lineHeight: 40, // 行高（至少为字体大小的2倍）
						fontSize: 12, // 减小字体避免溢出
						// 格式化器：确保返回含\n的字符串
						formatter: function(value) {
						  return value; // 直接返回带\n的格式化后的值
						}
					},
					yAxis: { data: [{tofix: 2 }] },
					dataLabel: false, // 关闭数据标签
				}
			}
		},
		onLoad: function(options) {
			this.unit_uuid = options.setUuid
			this.initWebSocket()
		},
		onShow() {
			this.inPage = true;
			this.getListHistoryData("data9")
			this.getListHistoryData("data10")
			this.getListHistoryData("data14")
			this.getListHistoryData("data15")
		},
		onUnload() {
			// 在页面销毁时关闭 WebSocket 连接
			if (this.webSocket) {
				this.webSocket.close({
					success: () => {
						console.log('主动关闭成功');
						this.webSocket = null;
						this.inPage = false;
					},
					fail: (err) => console.error('关闭失败:', err)
				});
			}
		},
		methods: {
			handleToHome() {
				uni.navigateBack({
					delta: 1,
				})
			},
			//开启，关闭集控器
			changeJKQ(bol) {
				this.JKQSwitch = true
				//暂无操作
			},
			//开启关闭水泵
			changeSB(bol) {
				if(this.HWP) {
					this.HWP = true
				} else {
					this.HWP = false
				}
				//暂无操作
			},
			//开启，关闭通道
			changeTD(item,index) {
				const message =
					`web_col://sn=${this.unit_uuid}&col={"pl_versions":11,"pl_json":{"device_sn":"${this.unit_uuid}","data":"path${index+1}%${!item.isOpen ? 0 : 1}"}}`
				this.sendData(message); // 连接发送数据
			},

			//实时通讯
			initWebSocket() {
				const wsUrl =env.wsUrl; // 注意这里补充了双斜杠
				// 使用 uni.connectSocket 建立连接
				this.webSocket = uni.connectSocket({
					url: wsUrl,
					success: () => {
						console.log('WebSocket 连接发起成功');
					},
					fail: (err) => {
						console.error('WebSocket 连接发起失败:', err);
						uni.showToast({
							title: "连接失败",
							icon: "none",
							duration: 2000
						});
					}
				});

				// 监听 WebSocket 连接打开事件
				this.webSocket.onOpen(() => {
					const message = `web_sub://sn=${this.unit_uuid}`; // 构造发送的数据
					this.sendData(message); // 连接打开后立即发送数据
				});

				// 监听 WebSocket 接收到消息事件
				this.webSocket.onMessage((event) => {
					if (event.data === `UNIT_OUT://sn=${this.unit_uuid}`) {
						uni.showToast({
							title: "设备离线",
							icon: "error",
							duration: 2000
						});
					} else if (event.data === `UNIT_LOGIN://sn=${this.unit_uuid}`) {
						const message =
							`web_col://sn=${this.unit_uuid}&col={"pl_versions":11,"pl_json":{"device_sn":"${this.unit_uuid}"}}`// 构造发送的数据
						this.sendData(message)
					} else if (this.isJsonString(event.data)) {
						let data = JSON.parse(event.data);
						this.setData(data);
					} else {
						console.log('收到的数据不是合法的 JSON 格式:', event.data);
					}
				});

				// 监听 WebSocket 连接错误事件
				this.webSocket.onError((error) => {
					console.error('WebSocket 错误:', error);
					uni.showToast({
						title: "服务器异常",
						icon: "none",
						duration: 2000
					});
				});

				// 监听 WebSocket 连接关闭事件
				this.webSocket.onClose(() => {
					console.log('WebSocket 连接已关闭');
					// 可以选择在这里重新连接
					if(this.inPage) {
						setTimeout(() => {
							this.initWebSocket();
						}, 5000);
					}
				});
			},
			//是否为json字符串
			isJsonString(str) {
				try {
					JSON.parse(str);
					return true;
				} catch (e) {
					return false;
				}
			},
			//设置数据
			sendData(message) {
				if (this.webSocket) {
					this.webSocket.send({
						data: message,
						success: () => {
							console.log('数据发送成功:', message);
						},
						fail: (err) => {
							console.error('数据发送失败:', err);
						},
					});
				} else {
					console.error('WebSocket 未连接');
				}
			},
			setData(data) {
				console.log(data)
				data = data.pl_json
				this.HWP = data.HWP == 1; //水泵开关，0代表关闭，1代表开启，99此路不存在 9999此路异常
				this.measure = Number(this.measure) < 6400 ? 0 : Number(this.measure) > 32000 ? 100 : (Number(this.measure) - 6400 / 25600).toFixed(2); //⽐例调节阀控制参数 ？
				this.ts1 = data.ts1; //供水温度
				this.ts2 = data.ts2; //回水温度
				this.ts3 = data.ts3; //混水温度
				this.pressure = data.pressure; // 供水压力
				this.pressure2 = data.pressure2;  //供水压力度
				let list = [...this.list]; // 创建一个副本
				list.forEach((item, index) => {
					const pathKey = `path${index + 1}`;
					if (data[pathKey] !== undefined) {
						this.processItem(item, data[pathKey]);
					}
				});
				this.list = list; // 将修改后的 list 赋值给 this.list
				console.log(this.list)
			},
			// 封装公共处理逻辑的函数
			processItem(item, pathValue) {
				// if (pathValue == "99" || pathValue == "9999") {
				// 	item.status = pathValue; // 99代表未启用 9999 异常  其他 正常
				// } else {
				// 	item.isOpen = pathValue == "1"; // 0代表关闭，1代表开启
				// }
				item.status = pathValue; 
				item.isOpen = pathValue == "1";
			},
			// 1. 在获取数据后，处理时间格式（示例：保留“时:分”）
			formatTimeCategories(rawCategories) {
			  return rawCategories.map(timeStr => {
			    // 原始时间："2025/09/05 12:12:00" → 处理后："12:12"
			    return timeStr.split(' ')[1].slice(0, 5); 
			  });
			},
			//获取历史数据
			async getListHistoryData(type) {
				let params = {
					unit_uuid: this.unit_uuid,
					params: type,
					status: 2
				}
				const res = await historyData(params);
				if (res.status == 200) {
					console.log(res.data)
					//1、供水温度 data9
					//2、回水温度 data10
					//3、供水压力 data14
					//4、回水压力 data15
					if(res.data!=null && res.data.length>0) {
						if(type == "data9") {
							this.salesData.categories = this.parseSensorData(res.data).datetime
							this.salesData.series[0].data = this.parseSensorData(res.data).temperature
						} else if(type == "data10") {
							this.userData.categories = this.parseSensorData(res.data).datetime
							this.userData.series[0].data = this.parseSensorData(res.data).temperature
						} else if(type == "data14") {
							this.trafficData.categories = this.parseSensorData(res.data).datetime
							this.trafficData.series[0].data = this.parseSensorData(res.data).temperature
						} else if(type == "data15") {
							this.conversionData.categories = this.parseSensorData(res.data).datetime
							this.conversionData.series[0].data = this.parseSensorData(res.data).temperature
						}
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
			},
			
			// 解析接口数据：拆分温度数组 + 时间数组（时间戳转年月日时分秒）
			parseSensorData(apiData) {
			  // 1. 初始化两个空数组，分别存储温度和格式化后的时间
			  const temperatureArr = []; // 第一个数组：data[子数组][0]（温度）
			  const timeArr = [];        // 第二个数组：data[子数组][1]（时间戳→格式化时间）
			
			  // 2. 遍历接口返回的 data 数组
			  apiData.forEach(item => {
			    // 2.1 提取温度（注意：接口返回的是字符串，需转为数字，避免图表显示异常）
			    const temp = Number(item[0]);
			    // 过滤异常值（如接口中的 999，可根据业务需求调整过滤规则）
			    if (temp !== 999) {
			      temperatureArr.push(Number(temp));
			    } else {
			      // 异常值处理：可设为 null（图表会跳过）或保留原数值
			      temperatureArr.push(0);
			    }
			
			    // 2.2 提取时间戳并转换为年月日时分秒（接口时间戳单位：毫秒）
			    const timestamp = Number(item[1]);
			    // 调用时间格式化工具函数
			    const formattedTime = this.formatTimestampToDateTime(timestamp);
			    timeArr.push(formattedTime);
			  });
			
			  // 3. 返回拆分后的两个数组
			  return {
			    temperature: temperatureArr, // 温度数组
			    datetime: timeArr            // 格式化时间数组
			  };
			},
			
			// 工具函数：时间戳（毫秒）转 "YYYY-MM-DD HH:MM:SS" 格式
			formatTimestampToDateTime(timestamp) {
			  // 创建 Date 对象（注意：时间戳需为数字类型）
			  const date = new Date(timestamp);
			  
			  // 补零函数：确保月/日/时/分/秒为两位数（如 9 → 09）
			  const padZero = (num) => num.toString().padStart(2, '0');
			
			  // 提取年月日时分秒
			  const year = date.getFullYear();
			  const month = padZero(date.getMonth() + 1); // 月份从 0 开始，需 +1
			  const day = padZero(date.getDate());
			  const hour = padZero(date.getHours());
			  const minute = padZero(date.getMinutes());
			  const second = padZero(date.getSeconds());
			
			  // 拼接为 "YYYY-MM-DD HH:MM:SS" 格式（可根据需求调整分隔符，如 YYYY/MM/DD）
			  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			}
		}
	}
</script>
<style scoped>
	.container {
		width: 100%;
	}

	.content {
		width: 100%;
		display: flex;
		align-items: center;
		flex-flow: column;
	}

	.canvas-box {
		width: 270px;
		height: 270px;
		background-color: #409eff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gauge-canvas {
		width: 200px;
		height: 200px;
	}

	.info-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;
		height: 80px;
		background-color: #409eff;
		border-radius: 20px;
		color: #ffffff;
	}

	.info-box-item {
		display: flex;
		align-items: center;
		flex-flow: column;
		width: 33.3%;
		justify-content: center;
	}

	.menu-box {
		position: fixed;
		width: 50%;
		/* 根据 TabBar 高度调整 */
		left: 0;
		right: 0;
		background-color: #fff;

		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu {
		width: 70%;
		border-left: 1px solid #cccccc;
		border-right: 1px solid #cccccc;
		border-top: 1px solid #cccccc;
	}

	.menu-item {
		padding: 15px;
		text-align: center;
		border-bottom: 1px solid #eee;
	}

	.white-bg {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 10px;
		background-color: #ffffff;
		margin-bottom: 10px;
		padding: 0 10px;
		height: 50px;
		box-sizing: border-box;
	}

	.white-bg1 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 10px;
		background-color: #ffffff;
		margin-bottom: 10px;
		padding: 10px;
		box-sizing: border-box;
		flex-flow: column;
	}

	.white-bg2 {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		border-radius: 10px;
		background-color: #ffffff;
		margin-bottom: 10px;
		padding: 10px;
		box-sizing: border-box;
		flex-flow: column;
	}

	.flex-row {
		display: flex;
		align-items: center;
	}
	.chart-section {
	  background-color: #fff;
	  border-radius: 8px;
	  padding: 16px;
	  margin-bottom: 16px;
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}
	
	.section-title {
	  font-size: 16px;
	  color: #333;
	  font-weight: 500;
	  display: block;
	  margin-bottom: 12px;
	}
</style>